<!doctype html>
<html lang="zh">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title id="t"></title>
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" media="all" />
		<link rel="stylesheet" type="text/css" href="./css/detail.css" />
<!--		<link rel="stylesheet" type="text/css" href="./lib/layui-v2.5.5/css/layui.css">-->
		<link rel="stylesheet" type="text/css" href="./css/dark.css">
	</head>

	<body class="home blog custom-background round-avatars" itemscope itemtype="http://schema.org/Organization">
		<div class="Yarn_Background" style="background-image: url( ./images/47fb3c_.jpg);"></div>
		<div class="navi" data-aos="fade-down">
			<div class="bt-nav">
				<div class="line line1"></div>
				<div class="line line2"></div>
				<div class="line line3"></div>
			</div>
			<div class="navbar animated fadeInRight">
				<div class="inner">
					<nav id="site-navigation" class="main-navigation">
						<div id="main-menu" class="main-menu-container">
							<div class="menu-menu-container">
								<ul id="primary-menu" class="menu">
									<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-17">
										<a href="/">首页</a>
									</li>
<!--									<li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-173">-->
<!--										<a href="/category">分类</a>-->
<!--									</li>-->
									<li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78">
										<a href="/archives">归档</a>
									</li>
									<li id="menu-item-252" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-252">
										<a href="/about">关于</a>
									</li>
									<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57">
										<a id="login" href="/login">登录</a>
									</li>
								</ul>
							</div>
						</div>
					</nav>
					<!-- #site-navigation -->
				</div>
			</div>
		</div>

		<header id="masthead" class="overlay animated from-bottom" itemprop="brand" itemscope itemtype="http://schema.org/Brand">
			<div class="site-branding text-center">
				<a href="">
					<figure>
						<img class="custom-logo avatar" src="./images/omikron.png" />
					</figure>
				</a>
				<h3 class="blog-description"><p>This is beauty</p></h3>
			</div>
			<!-- .site-branding -->
			<div class="decor-part">
				<div id="particles-js"></div>
			</div>
			<div class="animation-header">
				<div class="decor-wrapper">
					<svg id="header-decor" class="decor bottom" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
						<path class="large left" d="M0 0 L50 50 L0 100" fill="rgba(255,255,255, .1)"></path>
						<path class="large right" d="M100 0 L50 50 L100 100" fill="rgba(255,255,255, .1)"></path>
						<path class="medium left" d="M0 100 L50 50 L0 33.3" fill="rgba(255,255,255, .3)"></path>
						<path class="medium right" d="M100 100 L50 50 L100 33.3" fill="rgba(255,255,255, .3)"></path>
						<path class="small left" d="M0 100 L50 50 L0 66.6" fill="rgba(255,255,255, .5)"></path>
						<path class="small right" d="M100 100 L50 50 L100 66.6" fill="rgba(255,255,255, .5)"></path>
						<path d="M0 99.9 L50 49.9 L100 99.9 L0 99.9" fill="rgba(255,255,255, 1)"></path>
						<path d="M48 52 L50 49 L52 52 L48 52" fill="rgba(255,255,255, 1)"></path>
					</svg>
				</div>
			</div>
		</header>


		<div id="main" class="content">
			<div class="container">
				<article id="post-1202" class="js-gallery post-1202 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized tag-11 tag-22 tag-29">
					<style>
						.container {
							padding: 10px 0;
						}
						
						.post {
							margin: 0 auto;
						}
					</style>
					<section class="post_content">
						<div id='paper'></div>

						<div class="meta split split--responsive cf">
							<div class="split__title">
								<time id="time"></time>
								<span class=""><a href="" rel="tag"></a> </span>
							</div>
							<div id="social-share">
								<span class="entypo-share">
									<i class="iconfont">&#xe614;</i>分享</span>
							</div>
							<div class="slide">
								<a class="btn-slide" title="switch down">
									<i class="iconfont">&#xe615;</i>折叠评论区
								</a>
							</div>
						</div>
					</section>
				</article>
			</div>

			<svg id="upTriangleColor" width="100%" height="40" viewBox="0 0 100 102" preserveAspectRatio="none">
				<path d="M0 0 L50 100 L100 0 Z"></path>
			</svg>

			<div id="social">
				<ul>
					<li>
						<a href="" title="qzone" target="_blank"><i class="iconfont">&#xe67f;</i></a>
					</li>
					<li>
						<a href="" title="weibo" target="_blank"><i class="iconfont">&#xe680;</i></a>
					</li>
					<li>
						<a href="" title="douban" target="_blank"><i class="iconfont">&#xe681;</i></a>
					</li>
					<li>
						<a href="" title="twitter" target="_blank"><i class="iconfont">&#xe683;</i></a>
					</li>
				</ul>
			</div>

			<div id="panel">
				<div class="comment-area">
					<section class="comments">
						<div class="comments-main">
							<div id="comments-list-title"><span id="comment_num"></span> 条评论 </div>
							<div id="loading-comments">
								<div class="host">
									<div class="loading loading-0"></div>
									<div class="loading loading-1"></div>
									<div class="loading loading-2"></div>
								</div>
							</div>
							<ul id="comment_wrap" class="commentwrap">
							</ul>

							<div style="margin: 2px; padding: 3px;">
								<div id="page"></div>
							</div>

							<div id="respond" class="comment-respond">
								<h6 id="replytitle" class="comment-reply-title"><a rel="nofollow" id="cancel-comment-reply-link" href="" style="display:none;">取消</a></h6>
								<form class="layui-form" action="">
									<div id="author_info" class="author-info">
										<div class="layui-form-item layui-form-text">
											<div class="layui-input-block">
												<input id="author" class="layui-input" lay-verify="author"
													   type="text" name="author" placeholder="昵  称* : " />
											</div>
										</div>
										<div class="layui-form-item layui-form-text">
											<div class="layui-input-block">
												<input id="email" class="layui-input" lay-verify="email"
													   type="text" name="email"  placeholder="邮  箱* : " />
											</div>
										</div>
										<div class="layui-form-item">
											<div class="layui-input-block">
												<input class="layui-input"  type="text" name="url" placeholder="网  址 : " />
											</div>
										</div>
									</div>
									<div class="clearfix"></div>

									<div class="comment-form-info">
										<div class="real-time-gravatar">
											<img id="real-time-gravatar"
												 src="./images/d41d8cd98f00b204e9800998ecf8427e.png"
												 alt="gravatar头像" />
										</div>
										<p class="input-row">
											<i class="row-icon"></i>
											<textarea id="text" lay-verify="text" class="text_area" rows="3" cols="80" name="text" tabindex="4" placeholder="你不说两句吗？(°∀°)ﾉ……"></textarea>
											<input type="submit" lay-submit lay-filter="send" class="button" id="send" tabindex="5" value="发送" />
										</p>
									</div>
								</form>
							</div>
						</div>
					</section>
				</div>
			</div>
			<svg id="dwTriangleColor" width="100%" height="40" viewBox="0 0 100 102" preserveAspectRatio="none">
				<path d="M0 0 L50 100 L100 0 Z"></path>
			</svg>
			<div class="wrapper">
			</div>
		</div>

		<div class="p-header">
			<figure class="p-image" style="background-image: url(./images/47fb3c_9afed6c259f94589881bd55376206366mv2_d_3840_5784_s_4_2.jpg);"></figure>
		</div>


		<footer id="footer" class="overlay animated from-top">
			<div class="decor-wrapper">
				<svg id="footer-decor" class="decor top" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none">
					<path class="large left" d="M0 0 L50 50 L0 100" fill="rgba(255,255,255, .1)"></path>
					<path class="large right" d="M100 0 L50 50 L100 100" fill="rgba(255,255,255, .1)"></path>
					<path class="medium left" d="M0 0 L50 50 L0 66.6" fill="rgba(255,255,255, .3)"></path>
					<path class="medium right" d="M100 0 L50 50 L100 66.6" fill="rgba(255,255,255, .3)"></path>
					<path class="small left" d="M0 0 L50 50 L0 33.3" fill="rgba(255,255,255, .5)"></path>
					<path class="small right" d="M100 0 L50 50 L100 33.3" fill="rgba(255,255,255, .5)"></path>
					<path d="M0 0 L50 50 L100 0 L0 0" fill="rgba(255,255,255, 1)"></path>
					<path d="M48 48 L50 51 L52 48 L48 48" fill="rgba(255,255,255, 1)"></path>
				</svg>
			</div>
			<div class="socialize" data-aos="zoom-in">
				<li>
					<a title="weibo" class="socialicon" href=""><i class="iconfont" aria-hidden="true">&#xe601;
			</i></a>
				</li>
				<li>
					<a title="WeChat" class="socialicon" href=""><i class="iconfont" aria-hidden="true">&#xe609;</i></a>
				</li>
				<li>
					<a title="QQ" class="socialicon" href="" target="_blank"><i class="iconfont" aria-hidden="true">&#xe616;
			</i></a>
				</li>
			</div>
			<div class="cr">Copyright&copy; 2020. Powered by
				<a href="https://mapletown.xyz">Oxygen</a>
			</div>

			<script type='text/javascript' src='./js/jquery.min.js'></script>
			<script type='text/javascript' src='./js/plugins.js'></script>
			<script type='text/javascript' src='./js/script.js'></script>
			<script type='text/javascript' src='./js/particles.js'></script>
			<script type='text/javascript' src='./js/aos.js'></script>
			<script type='text/javascript' src='./js/highlight.pack.js'></script>
			<script type='text/javascript' src='./js/gravatar.js'></script>
			<script src="./js/util.js"></script>
			<script src="./lib/layui-v2.5.5/layui.js"></script>
			<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
			<script src="//cdn.bootcdn.net/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>
			<script>
				layui.use(['laypage', 'layer', 'form'], function () {
					var laypage = layui.laypage,
							layer = layui.layer,
							form = layui.form,
							$ = layui.$,
							count = 0,
							userInfo = JSON.parse(getCookie('user'));

					if(userInfo) {
						$("#login").text("我的账户");
						$("#login").attr('href', '/admin');
						$("#author_info").attr("style", "display: none");
					} else {
						$("#login").text("登录");
						$("#login").attr('href', '/login');
					}

					form.verify({
						email: function (value) {
							var pattern= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
							if (value.length === 0) {
								if(!userInfo)
									return "请输入电子邮箱";
							} else if (!pattern.test(value)){
								if(!userInfo)
									return "请检查电子邮箱格式";
							}
						},
						text: function(val){
							if (val.length === 0)
								return "请输入评论内容";
						},
						author: function (val) {
							if (val.length === 0)
								if(!userInfo)
									return "请输入昵称";
						}
					});

					// 监听提交
					form.on('submit(send)', function(data){
						var d;
						if (userInfo !== null) {
							d = {
								"cid": cid,
								"author": userInfo.userName,
								"email": userInfo.email,
								"text": data.field.text,
								"ip": returnCitySN.cip,
								"created": getTime(),
								"status": "reviewed"
							};
						} else {
							d = {
								"cid": cid,
								"author": data.field.author,
								"email": data.field.email,
								"text": data.field.text,
								"ip": returnCitySN.cip,
								"created": getTime(),
								"status": "reviewed"
							};
						}
						// console.log(d);
						$.ajax({
							url: "/comment/addComment",
							method: "POST",
							contentType: "application/json; charset=utf-8",
							data: JSON.stringify(d),
							successful: function (res) {
								console.log(res);
								if(res.content)
									layer.msg('评论成功，评论将在通过审核后显示');
								else
									layer.msg('评论失败');
							},
							error: function (res) {
								console.error(res);
							}
						});
						layer.msg('评论成功，评论将在通过审核后显示');
						setTimeout(function () {
							location.reload();
						}, 3000);

						return false;
					});

					var sess = '<header class="post_header"><h1 class="post_title">{0}</h1></header>' +
							'<div class="post-body js-gallery">{1}</div>';

					var comment = '<li class="comment even thread-even depth-1" id="li-comment-">' +
							'<div id="comment-969" class="comment_body contents"><div class="profile">' +
							'<a href="">' +
							'<img src="{0}" class="gravatar">' +
							'</a></div><div class="main shadow"><div class="commentinfo">' +
							'<section class="commeta"><div class="shang">' +
							'<h4 class="author"><a href="" target="_blank">' +
							'<img src="./images/9cc50a9e422fb1c89aebafeb959cef7a.jpg" ' +
							'class="gravatarsmall">{1}</a></h4></div></section></div>' +
							'<div class="body"><p>{2}</p></div><div class="xia info">' +
							'<span><time>{3}</time></span>' +
							'</div></div></div></li>';

					var cid = getQueryString('cid');

					MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});

					$.ajax({
						url: "/content/getContentByCid",
						method: "GET",
						data: {"cid": cid},
						success: function (res) {
							var paper = res.content;
							$("#t").text(paper.title);
							$("#paper")[0].innerHTML = sess.format(paper.title, paper.text);
							$("#comment_num").text(paper.commentNum);
							$("#time").attr("datetime", paper.modified);
							$("#time").text(paper.modified);
							// MathJax.typeset();
							var math = document.getElementById("paper");
							MathJax.Hub.Queue(["Typeset", MathJax.Hub, math]);
							$('pre code').each(function(i, block) {
								hljs.highlightBlock(block);
							});
						},
						error: function (res) {
							console.error('发生错误'+res);
						}
					});


					$.ajax({
						url: "/comment/getCommentByPage",
						method: "GET",
						async: false,
						data: {"cid": cid, "page": 1, "limit": 5},
						success: function (res) {
							var html = '';
							count = res.data.count;
							for (var i = 0; i < res.data.length; i++) {
								var img = 'http://cn.gravatar.com/avatar/' +
										hex_md5(res.data[i].email) + 's=60&d=identicon&r=G';
								html += comment.format(img, res.data[i].author,
										res.data[i].text, res.data[i].created);
							}
							$("#comment_wrap")[0].innerHTML = html;
						},
						error: function (res) {
							console.error((res));
						}
					});

					laypage.render({
						elem: 'page',
						count: 20,
						limit: 5,
						layout: ['prev', 'next'],
						jump: function (obj, first) {
							if (!first) {
								$.ajax({
									url: "/comment/getCommentByPage",
									method: "GET",
									async: false,
									data: {"cid": cid, "page": obj.curr, "limit": obj.limit},
									success: function (res) {
										var html = '';
										count = res.data.count;
										for (var i = 0; i < res.data.length; i++) {
											var img = 'http://cn.gravatar.com/avatar/' +
													hex_md5(res.data[i].email) + 's=60&d=identicon&r=G';
											html += comment.format(img, res.data[i].author,
													res.data[i].text, res.data[i].created);
										}
										$("#comment_wrap")[0].innerHTML = html;
									},
									error: function (res) {
										console.error((res));
									}
								});
							}
						}
					});
				});
			</script>
		</footer>

	</body>

</html>